<!-- 聊天工具栏组件 -->
<template>
  <div class="toolbar">
    <!-- 工具按钮区域 -->
    <div class="toolbar-buttons">
      <nut-button plain color="#4AA3A1" size="small" class="tool-button right">拍照上传</nut-button>
      <nut-button plain color="#4AA3A1" size="small" class="tool-button left" @click="handleEndClick">结束申请</nut-button>
      <nut-button plain color="#4AA3A1" size="small" class="tool-button right-secondary" @click="handleFileClick">相册上传</nut-button>
      <input 
        type="file" 
        class="hidden-file-input" 
        accept="image/*" 
        multiple 
        ref="fileInputRef" 
        @change="handleFileChange" 
      />
    </div>

    <!-- 输入框区域 -->
    <div class="input-area">
      <nut-input
        v-model="inputMessage"
        ref="inputRef"
        placeholder="请输入消息"
        class="message-input"
        @keyup.enter="handleSend"
      >
        <template #left>
          <img src="../u184.png" alt="输入框图标" class="input-icon" />
        </template>
        <template #right>
          <nut-button color="#4AA3A1" class="send-button" @click="handleSend">发送</nut-button>
        </template>
      </nut-input>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue';

// 响应式状态
const inputMessage = ref('');
const fileInputRef = ref<HTMLInputElement | null>(null);
const inputRef = ref<HTMLElement | null>(null);

// 事件定义
const emits = defineEmits<{
  (e: 'send', message: string): void;
  (e: 'file-select', event: Event): void;
  (e: 'back'): void;
  (e: 'end-application'): void;
}>();

// 发送消息
const handleSend = () => {
  const message = inputMessage.value.trim();
  if (!message) return;
  
  emits('send', message);
  inputMessage.value = '';
  
  // 聚焦输入框
  if (inputRef.value) {
    inputRef.value.focus();
  }
};

// 处理文件选择
const handleFileClick = () => {
  if (fileInputRef.value) {
    fileInputRef.value.click();
  }
};

// 处理文件变更
const handleFileChange = (event: Event) => {
  emits('file-select', event);
};

// 处理结束申请
const handleEndClick = () => {
  emits('end-application');
};

// 方法暴露
defineExpose({
  setInputValue: (text: string) => {
    inputMessage.value = text;
  }
});
</script>

<style lang="scss" scoped>
$primary-color: #4AA3A1;
$bg-color: #f7f8fa;

// 工具栏
.toolbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: $bg-color;
}

.toolbar-buttons {
  width: 100%;
  height: 1.8rem;
  position: fixed;
  bottom: 5vh;
  background-color: #f9fafd;
}

.tool-button {
  padding: 0 10px;
  
  &.right {
    float: right;
    top: -3rem;
    right: 20px;
  }
  
  &.left {
    float: left;
    top: -1rem;
    left: 10px;
  }
  
  &.right-secondary {
    float: right;
    top: -1rem;
    right: -1.3rem;
  }
}

.hidden-file-input {
  display: none;
}

// 输入区域
.input-area {
  width: 95%;
  position: fixed;
  bottom: 0;
  background-color: $bg-color;
  padding: 0 8px;
}

.message-input {
  border-radius: 15px;
  border: 1px solid #000;
}

.input-icon {
  height: 3vh;
  width: 3vh;
  // padding: 8px;
}

.send-button {
  width: 9vh;
  border-radius: 5px;
  height: 4vh;
  margin-right: 10px;
}
</style> 